<template>
	<view>
		<view class="u-margin-30 u-font-52">经营信息</view>
		<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
			<u-form-item :label-style="{marginLeft:'30rpx'}" label-width="200" :label-position="labelPosition" label="商家属性" prop="Att" class="input-margin">
				<u-input type="select" :select-open="selectShowAtt" v-model="model.Att" placeholder="请选择属性" @click="selectShowAtt = true"></u-input>
			</u-form-item>
			<u-form-item :label-style="{marginLeft:'30rpx'}" label-width="200" :label-position="labelPosition" label="主营品类" prop="category">
				<u-input placeholder="您最具优势的一个品类" v-model="model.category" type="text"></u-input>
			</u-form-item>
			<u-form-item :label-style="{marginLeft:'30rpx'}" label-width="250" :label-position="labelPosition" label="商品供货来源" prop="Source" class="input-margin">
				<u-input type="select" :select-open="selectShowSource" v-model="model.Source" placeholder="请选择供货来源" @click="selectShowSource = true"></u-input>
			</u-form-item>
			<u-form-item :label-style="{marginLeft:'30rpx'}" label-width="200" :label-position="labelPosition" label="供货省市" prop="region">
				<u-input placeholder="您最具优势的一个省份" v-model="model.region" type="text"></u-input>
			</u-form-item>
			<u-form-item :label-style="{marginLeft:'30rpx'}" :label-position="labelPosition" label="自有车辆数量" prop="number" label-width="250">
				<u-input placeholder="请输入" input-align="right" :clearable="false" v-model="model.number" type="number"></u-input>
				<text slot="right" class="u-content-color u-padding-right-30">辆</text>
			</u-form-item>
			<u-gap height="10" bg-color="#f4f4f4"></u-gap>
			<u-form-item :label-style="{marginLeft:'30rpx'}" label-width="300" :label-position="labelPosition" label="已合作平台或公司" prop="cooperation">
				<u-input placeholder="请输入合作方" v-model="model.cooperation" type="text"></u-input>
			</u-form-item>
			<u-gap height="10" bg-color="#f4f4f4"></u-gap>
			
			<u-form-item :label-style="{marginLeft:'30rpx'}" label-width="300" :label-position="labelPosition" label="是否提供发票" prop="payType">
				<u-radio-group v-model="model.payType" @change="radioGroupChange" active-color="#191d19">
					<u-radio shape="circle" v-for="(item, index) in radioList" :key="index" :name="item.name">{{ item.name }}</u-radio>
				</u-radio-group>
			</u-form-item>
		</u-form>
		<view class="u-margin-30">
			<u-button
			:loading="loading"
			:custom-style="customStyle" 
			:hair-line="false" 
			:ripple="true" 
			:ripple-bg-color="rippleBg"
			 @click="submit">{{loading? '提交中' : '提交'}}</u-button>
		</view>
		<u-select mode="single-column" :list="selectListAtt" v-model="selectShowAtt" @confirm="selectAtt"></u-select>
		<u-select mode="single-column" :list="selectListSource" v-model="selectShowSource" @confirm="selectSource"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				model: {
					Att:'',
					category:'',
					Source:'',
					region:'',
					number:'',
					cooperation:'',
					payType: '',
				},
				selectListAtt: [
					{
						value: '商家属性',
						label: '商家属性'
					},
					{
						value: '商家属性',
						label: '商家属性'
					},
					{
						value: '商家属性',
						label: '商家属性'
					}
				],
				selectListSource: [
					{
						value: '供货来源',
						label: '供货来源'
					},
					{
						value: '供货来源',
						label: '供货来源'
					},
					{
						value: '供货来源',
						label: '供货来源'
					}
				],
				radioList: [
					{
						name: '提供',
						checked: true,
						disabled: false
					},
					{
						name: '不提供',
						checked: false,
						disabled: false
					}
				],
				rules: {
					Att: [
						{
							required: true,
							message: '请选择商品属性',
							trigger: 'change',
						}
					],
					category: [
						{
							required: true,
							message: '请输入品类',
							trigger: 'blur' ,
						},
						{
							min: 1,
							max: 10,
							message: '品类长度在1到10个字符',
							trigger: ['change','blur'],
						},
					],
					Source: [
						{
							required: true,
							message: '请选择供货来源',
							trigger: 'change',
						}
					],
					region: [
						{
							required: true,
							message: '请输入省份',
							trigger: 'blur' ,
						},
						{
							min: 1,
							max: 10,
							message: '省份长度在1到10个字符',
							trigger: ['change','blur'],
						},
					],
					number: [
						{
							required: true,
							message: '请输入车辆数量',
							trigger: ['change','blur']
						},
						{
							type: 'number',
							message: '只能为数字',
							trigger: ['change','blur'],
						}
					],
					cooperation: [
						{
							required: true,
							message: '请输入合作方',
							trigger: 'blur' ,
						}
					],
					payType: [
						{
							required: true,
							message: '请选择任意一种方式',
							trigger: 'change',
						}
					]
				},
				selectShowAtt: false,
				selectShowSource: false,
				labelPosition: 'left',
				errorType: ['message'],
				disabled:true,
				loading:false,
				// 按钮css样式
				rippleBg:'rgba(255,255,255,0.3)',
				customStyle: {
					height:'100rpx',
					backgroundColor:'#191d19',
					boxShadow:'0 12rpx 20rpx -8rpx rgba(28, 34, 28, 0.3)',
					fontSize:'32rpx',
					fontWeight:'bold',
					color:'#FFF',
					marginTop:'90rpx'
				},
				Style: {
					height:'100rpx',
					backgroundColor:'rgb(123,125,123)',
					boxShadow:'0 12rpx 20rpx -8rpx rgba(28, 34, 28, 0.3)',
					fontSize:'32rpx',
					fontWeight:'bold',
					color:'#FFF',
					marginTop:'90rpx'
				}
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			// 选择商家属性回调
			selectAtt(e) {
				this.model.Att = '';
				e.map((val, index) => {
					this.model.Att += this.model.Att == '' ? val.label : '-' + val.label;
				})
			},
			// 选择商家供货来源回调
			selectSource(e) {
				this.model.Source = '';
				e.map((val, index) => {
					this.model.Source += this.model.Source == '' ? val.label : '-' + val.label;
				})
			},
			// radio选择发生变化
			radioGroupChange(e) {
				this.model.payType = e;
			},
			// 下一步-提交
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.loading = true;
						setTimeout(() => {
							this.loading = false;
							uni.navigateTo({
								url: 'three',
							});
						}, 2000);
						// if(!this.model.agreement) return this.$u.toast('请勾选协议');
					} else {
						this.loading = true;
						setTimeout(() => {
							this.loading = false;
							this.$u.toast('验证失败，请重新再试');
						}, 2000);
					}
				});
			}
		}
	}
</script>

<style>
	page{
		 background-color: #FFFFFF !important;
	}
	.input-margin .u-input{
		margin-right: 30rpx !important;
	}
</style>
<style lang="scss" scoped>
	.u-margin-30{
		margin: 60rpx 30rpx !important;
		line-height: 62rpx;
	}
</style>
